<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dynamic Loaded Column Chart</title>


  <link href="../assets/styles.css" rel="stylesheet" />

  <style>

    body {
      background: #fff;
    }

    .wrap {
      margin: 45px auto;
      max-width: 900px;
      position: relative;
    }

    #chart-year,
    #chart-quarter {
      width: 96%;
      max-width: 430px;
      box-shadow: none;
    }

    #chart-year {
      float: left;
      position: relative;
      transition: 1s ease transform;
      z-index: 3;
    }

    #chart-year.chart-quarter-activated {
      transform: translateX(0);
      transition: 1s ease transform;
    }

    #chart-quarter {
      float: left;
      position: relative;
      z-index: -2;
      transition: 1s ease transform;
    }
    
    #chart-quarter.active {
      transition: 1.1s ease-in-out transform;
      transform: translateX(0);
      z-index: 1;
    }

    @media screen and (min-width: 767px) {
      #chart-year {
        transform: translateX(50%);
      }
      #chart-quarter {
        transform: translateX(-50%);
      }
    }

    select#model {
      display: none;
      position: absolute;
      top: -40px;
      left: 0;
      z-index: 2;
      cursor: pointer;
      transform: scale(0.8);
    }

  </style>
</head>

<body>
  <div class="wrap">
    <select id="model" class="flat-select">
      <option value="iphone5">iPhone 5</option>
      <option value="iphone6">iPhone 6</option>
      <option value="iphone7">iPhone 7</option>
    </select>
    <div id="chart-year" class="chart-box"></div>
    <div id="chart-quarter" class="chart-box"></div>
  </div>


  <script src="../../dist/apexcharts.js"></script>
  <script src="data.js"></script>

  <script>
    Apex = {
      chart: {
        toolbar: {
          show: false
        }
      },
      tooltip: {
        shared: false
      },
    }
    var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];


    var optionsYear = {
      chart: {
        id: 'barYear',
        height: 400,
        width: '100%',
        type: 'bar',
      },
      plotOptions: {
        bar: {
          distributed: true,
          horizontal: true,
          endingShape: 'arrow',
          barHeight: '75%',
          dataLabels: {
            position: 'bottom'
          }
        }
      },
      dataLabels: {
          enabled: true,
          textAnchor: 'start',
          style: {
              colors: ['#fff']
          },
          formatter: function(val, opt) {
              return opt.globals.labels[opt.dataPointIndex]
          },
          offsetX: 0,
          dropShadow: {
            enabled: true
          }
      },
      
      colors: colors,
      series: [{
        data: makeData()
      }],
      states: {
        normal: {
          filter: {
            type: 'desaturate'
          }
        },
        active: {
          allowMultipleDataPointsSelection: true,
          filter: {
            type: 'darken',
            value: 1
          }
        }
      },
      tooltip: {
        x: {
          show: false
        },
        y: {
          title: {
            formatter: function(val, opts) {
              return opts.w.globals.labels[opts.dataPointIndex]
            }
          }
        }
      },
      title: {
        text: 'Yearly Results',
        offsetX: 15
      },
      subtitle: {
        text: '(Click on bar to see details)',
        offsetX: 15
      },
      yaxis: {
        labels: {
          show: false
        }
      },
    }

    var yearChart = new ApexCharts(
      document.querySelector("#chart-year"),
      optionsYear
    );

    yearChart.render();


    function updateQuarterChart(sourceChart, destChartIDToUpdate) {
      var series = [];
      var seriesIndex = 0;
      var colors = []

      if (sourceChart.w.globals.selectedDataPoints[0]) {
        var selectedPoints = sourceChart.w.globals.selectedDataPoints;
        for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
          var selectedIndex = selectedPoints[seriesIndex][i];
          var yearSeries = sourceChart.w.config.series[seriesIndex];
          series.push({
            name: yearSeries.data[selectedIndex].x,
            data: yearSeries.data[selectedIndex].quarters
          })
          colors.push(yearSeries.data[selectedIndex].color)
        }
        return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
          series: series,
          colors: colors,
          fill: {
            colors: colors
          }
        })

      }

    }


    var optionsQuarters = {
      chart: {
        id: 'barQuarter',
        height: 400,
        width: '100%',
        type: 'bar',
        stacked: true
      },
      plotOptions: {
        bar: {
          columnWidth: '50%',
          horizontal: false
        }
      },
      series: [{
        data: []
      }],
      legend: {
        show: false
      },
      grid: {
        yaxis: {
          lines: {
            show: false,
          }
        },
        xaxis: {
          lines: {
            show: true,
          }
        }
      },
      yaxis: {
        labels: {
          show: false
        }
      },
      title: {
        text: 'Quarterly Results',
        offsetX: 10
      },
      tooltip: {
        x: {
          formatter: function(val, opts) {
            return opts.w.globals.seriesNames[opts.seriesIndex]
          }
        },
        y: {
          title: {
            formatter: function(val, opts) {
              return opts.w.globals.labels[opts.dataPointIndex]
            }
          }
        }
      }
    }

    var chartQuarters = new ApexCharts(
      document.querySelector("#chart-quarter"),
      optionsQuarters
    )
    chartQuarters.render();

    yearChart.addEventListener('dataPointSelection', function (e, chart, opts) {
      var quarterChartEl = document.querySelector("#chart-quarter");
      var yearChartEl = document.querySelector("#chart-year");

      if (opts.selectedDataPoints[0].length === 1) {
        if(quarterChartEl.classList.contains("active")) {
          updateQuarterChart(chart, 'barQuarter')
        }
        else {
          yearChartEl.classList.add("chart-quarter-activated")
          quarterChartEl.classList.add("active");
          updateQuarterChart(chart, 'barQuarter')
        }
      } else {
        updateQuarterChart(chart, 'barQuarter')
      }

      if (opts.selectedDataPoints[0].length === 0) {
        yearChartEl.classList.remove("chart-quarter-activated")
        quarterChartEl.classList.remove("active");
      }

    })

    yearChart.addEventListener('updated', function (chart) {
      updateQuarterChart(chart, 'barQuarter')
    })


    document.querySelector("#model").addEventListener("change", function (e) {
      yearChart.updateSeries([{
        data: makeData()
      }])
    })
  </script>

</body>

</html>